<template>
    <div id="loginBox">
        <span class="loginBox-logo">LOGO</span><br>
        <span class="loginBox-title">管理登录系统</span><br>
        <el-form :model="loginForm" status-icon :rules="loginRules" ref="loginForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="账号" prop="userName">
                <el-input class="accout" v-model="loginForm.userName" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input class="password" type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
                <a>忘记密码？</a>
            </el-form-item>
            <el-form-item class="submitBtn">
                <el-button type="primary" @click="submitForm('ruleForm')">登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
            </el-form-item>
        </el-form>
        
    </div>
</template>
<script>
import '../assets/css/login.css'
export default {
    data(){
        return{
            loginForm: {
                userName: 'acct1', // user1  acct1
                password: '123456'
            },
            loginRules: {
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ],
                userName: [
                    { required: true, message: '账号不能为空', trigger: 'blur' }
                ]
            }
        }
        
    },
    methods: {
        login() {
            this.$Api.login(this.loginForm).then(res => {
                if(res.code == '200'){
                    this.$router.push({path: '/home'});
                }
            })
        },  
        submitForm() {
            var that = this;
            this.$refs.loginForm.validate((valid) => {
                console.log(valid)
                if (valid) {
                    that.login()
                } else {
                    return false;
                }
            });
      }
    }
}
</script>